<template>
  <div class="inner">
    <el-form :inline="true" :model="formData">
      <el-form-item label="医保年度：">
        <el-input v-model="formData.user"></el-input>
      </el-form-item>
      <el-form-item>
      <el-button type="primary" @click="handleSubmit">查询</el-button>
    </el-form-item>
    </el-form>
    <section class="card-info">
      <div>
        <span>个人编号：</span><span>{{cardInfo.grbh00}}</span>
      </div>
      <div>
        <span>社保卡号：</span><span>{{cardInfo.sbkh00}}</span>
      </div>
      <div>
        <span>姓名：</span><span>{{cardInfo.xming0}}</span>
      </div>
      <div>
        <span>性别：</span><span>{{cardInfo.xbie00}}</span>
      </div>
      <div>
        <span>出生日期：</span><span>{{cardInfo.csrq00}}</span>
      </div>
      <div>
        <span>账户余额：</span><span>{{cardInfo.zhye00}}</span>
      </div>
      <div>
        <span>社保卡状态：</span><span>{{cardInfo.sbkzt0}}</span>
      </div>
      <div>
        <span>投保日期：</span><span>{{cardInfo.tbrq00}}</span>
      </div>
      <div>
        <span>工作状态：</span><span>{{cardInfo.gzzt00}}</span>
      </div>
    </section>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        formData: {
          user: "",
        },
        cardInfo: {
          grbh00: 45454,
          sbkh00: 4545454545,
          lwkh00: 45454,
          xming0: "张流文",
          xbie00: "女",
          csrq00: "1990-10-05",
          zhye00: 4545,
          sbkzt0: "统筹冻结",
          tbrq00: "2013-08-01",
          gzzt00: "在职"
        }
      }
    },
    methods: {
      handleSubmit () {

      }
    }
  }
</script>

<style scoped lang="scss">
  .inner {
    padding-left: 50px;
  }

  .card-info {
    div {
      margin: 10px 0;
    }

    span {
      display: inline-block;

      &:nth-child(1) {
        width: 20%;
        text-align: right;
      }

      &:nth-child(2) {
        color: #949eaf;
      }
    }
  }
</style>
